<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>富豪榜</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="pnb"></div>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li>主页</li>
            <li>排行榜</li>
            <li>联系方式</li>
        </ul>
    </nav>
    <!-- 头部内容 -->
    <header>
        <!-- 导航栏的按钮 -->
        <button id="toggle">导航栏</button>
        <!-- 标题 -->
        <h2>欢迎来到富豪排行榜</h2>
        <!-- 欢迎语句 -->
        <p>weclome to the rich rank</p>
        <!-- 登陆按钮 -->
        <button id="login">登陆</button>
    </header>
    <!-- 主题内容 -->
    <div class="container">
        <!-- 左盒子 -->
        <aside>
            <!-- 五个按钮 -->
            <button id="add-user">添加账户</button>
            <button id="double">资金翻倍</button>
            <button id="show-millionaire">查询百万富翁</button>
            <button id="sort">财富榜</button>
            <button id="calculate">计算总额</button>
        </aside>
        <!-- 右盒子 -->
        <main id="main">
            <h2>
                <strong>Person</strong>
                <span>Wealth</span>
            </h2>
        </main>
    </div>


    <script>
        var dataInfo = [
            { name: "English chan", money: 392001 },
            { name: "alex chan", money: 568932 },
            { name: "melon chan", money: 698756 },
            { name: "Clare Langner", money: 292489 },
            { name: "Abigail Rice", money: 953957 },
            { name: "Clarice Dias", money: 168472 },
            { name: "Vernon Lucas", money: 718225 },
            { name: "Nina Schmidt", money: 889147 },
        ];
        //先获取导航栏元素 
        var nav_btn = document.querySelector('#toggle');
        //给导航栏这个按钮添加二级事件 监听器
        nav_btn.addEventListener('click', function () {
            //给body标签切换类名classList.toggle
            document.body.classList.toggle('show_nav');
        });
        /*面试必问:涉及到性能优化
        1.改变width宽度  0->200px 改变了盒子的结构 =>引起整个浏览器的重排(回流) 重新渲染整个页面
        2.通过transform来做 或者改变一下背景色 只是改变了盒子的外观=>引起浏览器的重新绘制(重绘)
        只需要重新渲染改变的那个盒子
        */
        //================设置公共函数========================
        var arr = [];
        var count = 0//数组的第一个下标
        //获取右边展示用的盒子
        var main = document.querySelector('#main');
        function public(arr) {//需要遍历数组 数组里面有什么内容就渲染什么内容
            //arr里面装的是我要渲染用的数据
            main.innerHTML =//这个结构要一直在 后面遍历进来的数据排在后面
                `
            <h2>
                <strong>Person</strong>
                <span>Wealth</span>
            </h2>
            `
            //把上一次的清除
            //遍历数组 渲染到页面
            arr.forEach(function (item, index) {
                //item就是你要渲染的每个对象
                var div = document.createElement('div');//创建元素节点
                div.classList.add('person');//classList.add给div添加一个类名
                div.innerHTML =
                    `
                <strong>${item.name}</strong>
                ${formatMoney(item.money)}
                `
                main.appendChild(div);//插入一个节点在main的后面
            });
        }
        //===============添加数据=========================
        //获取元素
        var add = document.querySelector('#add-user');
        //给添加账户的按钮绑定事件
        add.addEventListener('click', addfn);
        function addfn() {
            //点击一次 渲染一个对象 点第二次的时候 前一次的数据要保留
            //多个数据 有序->用数组存放 在公共函数那里已经创建了空数组和次数
            //点一次就push到新数组中
            //遍历渲染
            arr.push(dataInfo[count]);
            count++;//每次点击之后 数量要+1
            public(arr);//每次点击之后有数据进入arr里面 然后调用公共函数把新的arr传给公共函数渲染到页面
            if (count == dataInfo.length) {//判断我添加的数据如果等于数据的长度 
                add.disabled = true;//就把按钮给禁用
            }
        }

        //=================翻倍======================================
        //获取元素
        var double = document.querySelector('#double');
        double.addEventListener('click', doublefn);
        function doublefn() {
            //要翻倍的是 新的arr中的对象中的money属性
            //方法一 forEach
            arr.forEach(function (item) {
                item.money *= 2;
            });
            public(arr);
            //========方法二map + ...扩展运算法==================
            // arr = arr.map(function(item) {
            //     return {...item,money:item.money * 2};
            // });
            // public(arr);
        }
        //====================查询==============================
        //先获取元素
        var query_btn = document.querySelector('#show-millionaire');
        //给查询按钮绑定事件
        query_btn.addEventListener('click', queryfn);
        function queryfn() {
            arr = arr.filter(function (item) {//filter过滤数组 过滤完之后有重新赋值给arr
                return item.money >= 1000000;//把大于等于1000000的保留
            });
            public(arr);
        }
        //=================排序==================================
        var most_btn = document.querySelector('#sort');
        most_btn.addEventListener('click', mostfn);
        function mostfn() {
            arr = arr.sort(function (a, b) {//sort数组的排序方法
                return b.money - a.money;
            });
            public(arr);
        };
        //================总额=====================================
        var total_btn = document.querySelector('#calculate');
        total_btn.addEventListener('click', totalfn);
        function totalfn() {
            var acc = arr.reduce(function (prev, item, index) {
                //prev初始值或者每一次叠加后的结果
                //item数组的每一项数据
                //index数组的下标
                //reduce数组的方法进行累加累计
                return (prev += item.money);
            }, 0);
            var div = document.createElement('div');//创建了一个元素节点
            div.innerHTML =
                `
                <h2>
                    <strong>Total sum:</strong>
                        ${formatMoney(acc)}
                </h2>
        `
            main.appendChild(div);
        }

        //======================格式化金钱=======================
        // function formatMoney(money) {
        //     //调用数字对象上的一个方法
        //     var res = money.toLocaleString();
        //     return '$' + res + '.00';
        // }
        ////////////////方法二////////////////////////////
        function formatMoney(money) {
            // 每循环第三次的时候 并且不是第0个元素 就在插入一个逗号(,)
            var res;
            var newArr = [];
            var counts = 0;
            var arr = money.toString().split('');//把money转换成字符串类型 split分隔
            for (var i = arr.length - 1; i >= 0; i--) {
                counts++;
                newArr.unshift(arr[i]);//拿旧数组的最后一个元素去插入到新数组的最前面
                if (counts % 3 == 0 && i != 0) {
                    newArr.unshift(',');//在数组的最前面插入一条数据
                }
            }
            return '$' + newArr.join('') + '.00';
        }

    </script>
</body>

</html>